<template>
  <div class="testManageBox">
    <div class="containerBox">
      <div class="testPaperTop">
        <div class="testPaperTopLeft">
          <span>试卷名称：</span>

          <el-select
            v-model="testPaperId"
            class="selectPaperName"
            clearable
            @change="searchTestPaper"
            @clear="clearSearch"
            placeholder="请选择试卷名称"
          >
            <el-option
              v-for="item in testPaperData"
              :key="item.id"
              :label="item.paperTitle"
              :value="item.paperTitle"
            >
            </el-option>
          </el-select>

          <img
            src="@/assets/images/reset.png"
            style="cursor: pointer;"
            @click="clearSearch"
          >
          <span
            style="cursor: pointer;"
            @click="clearSearch"
          >重置数据</span>
        </div>
        <div class="testPaperTopRight">
        </div>
      </div>

      <div class="testPaperTable">
        <div class="operateTable">
          <div class="batchDelete">
            <el-button
              plain
              :disabled="selectPaperIds.length===0"
              @click="batchDeleteTestpaper"
            >批量删除</el-button>
          </div>
          <div class="downloadAndAdd">
            <el-button
              class="addTest"
              @click="addTestPaper"
            >
              <el-icon
                style="margin-right: 16px;color: #FFFFFF;font-size: 16px;"
              >
                <Plus />
              </el-icon>
              新增试卷
            </el-button>
          </div>
        </div>
        <div class="tableBox">
          <el-table
            ref="multipleTableRef"
            :data="testPaperData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            >
            </el-table-column>
            <el-table-column
              label="编号"
              width="220"
            >
              <template #default="scope">
                <!-- 生成不重复的序号 -->
                {{ (pages - 1)* limit + scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="paperTitle"
              label="试卷名称"
              width="250"
            />
            <el-table-column
              prop="totalTopic"
              label="总题数"
              show-overflow-tooltip
              width="130"
            />
            <el-table-column
              prop="totalValue"
              label="总分值"
              show-overflow-tooltip
              width="130"
            />
            <el-table-column
              prop="createBy"
              label="创建人"
              show-overflow-tooltip
              width="130"
            />
            <el-table-column
              prop="createTime"
              sortable=""
              label="创建时间"
              show-overflow-tooltip
              width="200"
            />
            <el-table-column
              property="name"
              label="详情"
              show-overflow-tooltip
            >
              <template #default="scope">
                <el-button
                  link
                  style="font-size: 14px;color: #5974FF;"
                  @click="viewDetail(scope)"
                  v-if="scope.row.paperType === 0"
                >
                  查看详情
                </el-button>
                <el-button
                  link
                  style="font-size: 14px;color: #5974FF;"
                  v-if="scope.row.paperType === 1"
                  disabled
                >
                  随机选题无法查看试卷详情
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
              property="name"
              label="操作"
              show-overflow-tooltip
            >
              <template #default="scope">
                <el-button
                  link
                  @click="editTestPaper(scope.row.paperId)"
                >
                  <el-icon
                    style="color: #5974FF;font-size: 16px;margin-right: 2px;"
                    :class="{'unableToView': scope.row.paperType === 1}"
                  >
                    <EditPen />
                  </el-icon>
                  <span style="font-size: 12px;color: #363636;">编辑</span>
                </el-button>
                <el-button
                  link
                  @click="deleteTestPaper(scope)"
                >
                  <el-icon
                    style="color: #F99D38;font-size: 16px;margin-right: 2px;"
                  >
                    <Delete />
                  </el-icon>
                  <span style="font-size: 12px;color: #363636;">删除</span>

                </el-button>
              </template>
            </el-table-column>
          </el-table>

        </div>
        <Pagination
          :limit="limit"
          :total="total"
          :page="pages"
          @pagination="handlePagination"
        ></Pagination>
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// 引入获取试卷列表，删除试卷，获取试卷详情 的接口
import { testPaperList, delTestPaper, getTestPaperDetail } from '@/api/assessment/testpapermanage.js'
import { exportExcel, importExcel } from "@/utils/peak-tools.js";
import { ElMessage, ElMessageBox } from 'element-plus'
// 引入分页组件
import Pagination from '@/components/Pagination/index.vue'
import { useDictStore } from '@/store/modules/addtest.js'
const router = useRouter()
const dictStore = useDictStore()
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])

function deepClone () {
  const obj = {
    name: '张三',
    age: 18,
    friends: ['李四', '王五'],
    family: {
      mother: '李妈妈',
      father: '王爸爸',
    }
  }

}

const testPaperId = ref(null)
function searchTestPaper () {
  getTestPaperList()
}

function clearSearch () {
  testPaperId.value = null
  getTestPaperList()
}

function addTestPaper () {
  dictStore.clearIds()
  router.push({
    path: 'addtestpaper',
    query: {
      type: 'add'
    }
  })
}

function viewDetail (scope) {
  router.push({
    path: 'testpaperdetail',
    query: {
      paperId: scope.row.paperId
    }
  })
}


// 存储试卷信息
const testPaperData = ref([])
const limit = ref(10)
const total = ref(0)
const pages = ref(1)
// 获取试卷信息
async function getTestPaperList () {
  const res = await testPaperList({ paperTitle: testPaperId.value, pageNum: pages.value, pageSize: limit.value })
  total.value = res.data.total
  limit.value = res.data.size
  testPaperData.value = res.data.records
}
getTestPaperList()

function handlePagination (val) {
  limit.value = val.limit
  pages.value = val.page
  getTestPaperList()
}


// 存储选中的id
const selectPaperIds = ref([])
function handleSelectionChange (item) {
  selectPaperIds.value = item.map((item) => item.paperId)
}

// 批量删除试卷的方法
function batchDeleteTestpaper () {
  ElMessageBox.confirm(
    '确定删除您选中的试卷吗？',
    '系统提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      await delTestPaper(selectPaperIds.value)
      getTestPaperList()
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除取消',
      })
    })
}

const tableTemplateHead = ref({
  试卷名称: 'paperTitle',
  总题数: 'totalTopic',
  总分值: 'totalValue',
  创建人: 'createBy',
})

const tableTemplateData = ref([
  {
    paperTitle: '2023年春季学期期末考试',
    totalTopic: 100,
    totalValue: 100,
    createBy: '张三',
    createTime: '2023-03-20 10:00:00',
  },
])

// 模板下载
async function templateDownload () {
  await exportExcel(`试卷导入模板.xlsx`, tableTemplateHead.value, tableTemplateData.value, (sheet) => {
    let columnWidth = [16, 10, 10, 32, 16, 10, 30, 30, 30, 10];
    sheet["!cols"] = columnWidth.map((width) => ({
      width,
    }));
    return sheet;
  })
}

// 编辑试卷
function editTestPaper (paperId) {
  dictStore.editQuestion(paperId)
  console.log(dictStore.singleChoiceIds)
  console.log(dictStore.multipleChoiceIds)

  router.push({
    path: 'addtestpaper',
    query: {
      paperId,
      type: 'edit',
      isGetData: 1
    }
  })
}


// 删除试卷
async function deleteTestPaper (scope) {

  ElMessageBox.confirm(
    '确定要删除吗？',
    '系统提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      confirmButtonClass: 'confirmDeleteBtn',
      cancelButtonClass: 'cancelDeleteBtn',
      type: 'warning',
    }
  )
    .then(async () => {
      const res = await delTestPaper([scope.row.paperId])
      getTestPaperList()
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除取消',
      })
    })
}





</script>

<style lang="scss" scoped>
.testManageBox {
  padding: 32px 32px 32px 32px;
  background-color: #f5f6f9;
  .containerBox {
    min-height: 836px;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;

    .testPaperTop {
      display: flex;
      justify-content: space-between;
      height: 88px;
      padding: 24px 32px;
      border-bottom: 1px solid #d4d4d4;

      .testPaperTopLeft {
        display: flex;
        align-items: center;
        span:nth-child(1) {
          margin-right: 8px;
          font-size: 16px;
          color: #696969;
        }
        ::v-deep(.el-input__wrapper) {
          box-shadow: none;
          background-color: #eee;
          &:focus {
            box-shadow: none !important;
          }
        }

        img {
          line-height: 39px;
          margin-left: 32px;
        }

        span:nth-child(4) {
          font-size: 14px;
          color: #363636;
          margin-left: 8px;
        }
      }

      .testPaperTopRight {
        .exportBtn {
          width: 80px;
          height: 40px;
          border-radius: 6px 6px 6px 6px;
          border: 1px solid #5974ff;
          font-size: 16px;
          color: #5974ff;
          &:hover {
            background-color: transparent;
          }
          &:focus {
            background-color: transparent;
          }
        }
      }
    }

    .testPaperTable {
      padding: 24px 32px 38px 32px;
      .operateTable {
        display: flex;
        justify-content: space-between;
        .batchDelete {
          button {
            width: 112px;
            height: 40px;
            border-radius: 6px 6px 6px 6px;
            border: 1px solid #5974ff;
            font-size: 16px;
            color: #5974ff;
          }
        }

        .downloadAndAdd {
          span {
            font-size: 16px;
            color: #44bd60;
            margin-right: 48px;
          }

          .addTest {
            width: 144px;
            height: 40px;
            background: #5974ff;
            border-radius: 6px 6px 6px 6px;
            font-size: 16px;
            color: #ffffff;
          }
        }
      }

      .tableBox {
        margin-top: 24px;
        ::v-deep(.el-table__header) {
          height: 56px;
        }
        ::v-deep(.el-table__row) {
          height: 56px;
        }
        .unableToView {
          color: gray !important;
        }
      }
    }
  }
}
</style>